iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

Flutter系列 第 17

Flutter基礎介紹與實作-Day17 Onboarding、Login、Sign Up範例實作(4)

  • 分享至 

  • xImage
  •  

今天就廢話不多說把註冊頁寫完吧!


註冊頁
一樣先來構思畫面,由上而下AppBar,標題,描述文字,email 輸入框,密碼輸入框,確認密碼輸入框,送出的按鈕,透過社群軟體登入的UI
我們一樣先把之前有遺漏的Widget先補上,就是透過社群軟體登入的UI,開始建立資料夾吧!
先在lib資料夾中的components資料夾裡建一個social_media.dart,再來是建立資料夾,這ˋ邊其實跟前面差不多,所以就簡單寫喔
資料夾:
lib/screens/sign_up、
lib/screens/sign_up/components
資料夾裡的資料:
lib/screens/sign_up/sign_up_screen.dart、lib/screens/sign_up/components/body.dart、lib/screens/sign_up/components/sign_up_form.dart
完成後就可以來看程式碼了
social_media.dart
https://ithelp.ithome.com.tw/upload/images/20211001/201410321dLD9HJuF5.jpg

sign_up_form.dart
https://ithelp.ithome.com.tw/upload/images/20211001/20141032U69a5oJczD.jpg

body.dart
https://ithelp.ithome.com.tw/upload/images/20211001/20141032vkmE8rrQPr.jpg

sign_up_screen.dart
https://ithelp.ithome.com.tw/upload/images/20211001/20141032dXxlcYdAWH.jpg

最後記得一樣在routes.dart補上連結,還有在登入頁、忘記密碼頁,補上點擊註冊時的事件,就都完成了!
成果如下
https://ithelp.ithome.com.tw/upload/images/20211001/20141032uTf6khJIgU.jpg

完整程式碼


今日總結
我們寫了這麼多天終於完成了一個簡單的登入和註冊頁面了,有些按鈕按了沒有反應是正常的,因為我們還沒把其他功能都連上,所以明天開始會陸陸續續加上一些功能,敬請期待


上一篇
Flutter基礎介紹與實作-Day16 Onboarding、Login、Sign Up範例實作(3)
下一篇
Flutter基礎介紹與實作-Day18 FireBase
系列文
Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言